<template>
	<div class="inpage-calendar" @touchmove.prevent>
		<div class="inpage-bg" @click="handleCalendarCancel"></div>
		<div class="inpage-wrap">
			<Calendar
				:type="type"
				:disabledStep="disabledStep"
				:calendarStartTime="calendarStartTime"
				:calendarEndTime="calendarEndTime"
				:calendarRange="calendarRange"
				:calendarSelectedValue="calendarSelectedValue"
				:datePicketType="datePicketType"
				@on-date-picker="handleCalendarSelected"
				@on-month-selected="handleCalendarSelected"
			/>
		</div>
	</div>
</template>

<style lang="less" scoped>
	@import "../../less/calendar/inpage.calendar.main.less";
</style>

<script type="text/ecmascript-6">
	import Calendar from './index'
	export default {
		name: 'inpage-calendar',
		components: { Calendar },
		props: {
			calendarType: {
				type: String,
				default: 'date-single' // 'date-single' 'month'
			},
			startTime: {
				type: [String, Number]
			},
			isB2b: {
				type: Boolean
			},
			disabledStep: {
				type: Number
			},
			calendarSelectedValue: {
				type: String
			}
		},
		data() {
			return {
				type: this.calendarType === 'month' ? 'month' : 'date',
				calendarStartTime: this.startTime || (this.isB2b ? new Date('2017-12-01').valueOf() : new Date('2018-01-01').valueOf()),
				calendarEndTime: undefined,
				calendarRange: undefined,
				datePicketType: this.calendarType === 'date-range' ? 'range' : 'single'
			};
		},
		methods: {
			handleCalendarSelected(value) {
				this.$emit('on-calendar-selected', value);
			},
			handleCalendarCancel() {
				this.$emit('on-calendar-cancel');
			}
		}
	}
</script>


